<!-- 区域的组件 -->
<template>

    <el-row >

        <el-collapse :accordion="widget.options.accordion"   >
            <el-collapse-item    v-for="(item,tabIndex) in widget.options.options" :name="item.value" :label="item.value"  :title="item.value">
                <div v-for="(column,index) in columns[tabIndex]" :key="column.key" >
                    <el-col :span="column.options !== undefined  &&  column.options.span" class="drag-widget field-item">

                        <div v-if="column.model" >
                            <el-form-item

                                    :label="column.name" :prop="widget.model+'.'+tabIndex+'.'+column.model"
                                    :rules="column.rules?column.rules:[]"
                                    :class="{'is_req': column.options.required,'display':'block'}"
                            >
                                <GenerateElementItem
                                        :blanks="blanks" is-table='block'
                                        :path="widget.model+'.'+tabIndex+'.'+column.model"
                                        v-model="value[tabIndex][column.model]"
                                        :models_temp="models_temp"
                                        :widget="column"
                                        :remote="remote"
                                        :models.sync="dataModels"
                                        :strutAll="strutAll"
                                        :index="2"
                                >

                                </GenerateElementItem>
                            </el-form-item>


                        </div>



                    </el-col>
                </div>
            </el-collapse-item>



        </el-collapse>


    </el-row>

</template>

<script>
    import {verification } from  '../../router/verification.js'

    function isInArray(arr,value){

        for(var i = 0; i < arr.length; i++){
            if(value === arr[i]){
                return true;
            }
        }
        return false;
    }
    export default {

        components: {
            GenerateElementItem: () => import('../../GenerateElementItem.vue')
        },
        props: ['columns', 'value', 'models', 'remote', 'blanks','models_temp','widget','strutAll','data','path','tabIndex'],
        data () {
            //console.log(this.columns[0].options.defaultValue);
            return {
                tableData: this.value,
                dataModels: this.models,
                checkedCities: [],
                dialogVisible: false,
            }
        },
        created(){
            var tableColumns=this.widget.tabColumns;
            for(var i=0;i<tableColumns.length;i++){
                for (var j = 0; j <tableColumns[i].length; j++) {
                    if(tableColumns[i][j].rules) {
                        for (var k = 0; k < tableColumns[i][j].rules.length; k++) {
                            tableColumns[i][j].rules[k].validator=this.validatePass;
                        }
                    }

                }

            }
        },
        methods: {
            handleClick(tab, event) {
                var index=  tab.index

            },
            validatePass(rule, info, callback) {
                verification(rule, info, callback,this)
            },
            handleAddRow () {
                var dataModels=this.dataModels
                let item = {}
                if (this.columns !== undefined    ){
                    if (this.columns.length > 0){
                        for (let i = 0; i < this.columns.length; i++) {
                            item[this.columns[i].model] = ""
                        }


                    }
                }
                this.tableData.push(item);


            },
            handleRemove (index) {
                this.tableData.splice(index, 1)
            },
            isInArray(arr,value){
                for(var i = 0; i < arr.length; i++){
                    if(value === arr[i]){
                        return true;
                    }
                }
                return false;
            },
            handleImport(){

            },
            handleClose(){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
            ,
            handleCheckedCitiesChange(value) {
                this.checkedCities=value;

            },


        },
        watch: {
            /*value (val) {
                this.tableData = val
            },
            tableData (val) {
                this.$emit('input', val)
            },
            dataModels: {
                deep: true,
                handler (val) {
                    this.$emit('update:models', val)
                }
            },
            models: {
                deep: true,
                handler (val) {
                    this.dataModels = val
                }
            }*/
        },

    }
</script>


<style lang="scss">
    .row-bd{
        border: 1px solid #EBEEF5;
        padding-top:12px;
    }
    .addRow{
        display: block !important;
        margin-top: 18% !important;
    }
    .is_req {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }
</style>


